<template>
	<view>
		<block v-if="loading > 0" >
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">覆约详情</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				<view class="order_list">
					<view class="order_text">
						<view class="text_box">
							<view class="title_box">
								<view class="title">{{car.car_no}}</view>
								<!-- <view class="type">审核中</view> -->
							</view>
							<view class="text">{{car.title}}</view>
						</view>
						<view class="order_img">
							<image src="/static/bg04.png" mode="widthFix"></image>
						</view>
						<!-- <view class="order_menu">去还款</view> -->
					</view>
				</view>
				
				<view class="appoint_box">
					<view class="appoint_text">
						<view class="text_box">
							<view class="title">本期应覆约(元)</view>
							<view class="num">{{stage.money}}</view>
							<view class="text">{{stage.stat_day|timeFrom('yyyy年mm月dd日')}}</view>
						</view>
						<view class="menu" :data-url="'/pages/personalcenter/appoint/retreaty'" @click="to_model">立即覆约</view>
					</view>
					<view class="appoint_menu">
						<view class="menu">
							<view class="t">总金额(元)</view>
							<view class="n">{{order.money}}</view>
						</view>
						<view class="menu">
							<view class="t">总期数</view>
							<view class="n">{{order.loans_num}}期</view>
						</view>
						<view class="menu">
							<view class="t">还款方式</view>
							<view class="n" v-if="order.rate_type == 0">等额本息</view>
							<view class="n" v-else>等额本金</view>
						</view>
					</view>
				</view>
				
				<view class="records_box">
					<view class="records_menu">
						<view class="menu" :class="select == 0 ? 'menucolor' : ''" data-index="0" @tap="setNavMenu">覆约计划</view>
						<view class="menu" :class="select == 1 ? 'menucolor' : ''" data-index="1" @tap="setNavMenu">覆约明细</view>
					</view>
					<block v-for="(item, index) in list" :key="index">
						<view class="records_list">
							<view class="text_box">
								<view class="title">
									<view class="name">{{item.cur_stage}}期</view>
					
									<view class="tag" v-if="item.status == 1">覆约中</view>
									<view class="tag" v-else-if="item.status == 2">已履约</view>
									<view class="tag" v-else-if="item.status == 0">待履约</view>
									
									<view class="tag02" v-if="item.is_cur == 1">本期</view>
									<view class="tag03" v-if="item.expire_day > 0">逾期{{item.expire_day}}天</view>
								</view>
								<view class="time">{{item.bill_date||'暂无'}}</view>
							</view>
							
							<view class="text_box">
								<view class="money">￥{{item.money}}</view>
								<view class="text"> 含本金{{item.principal}}</view>
							</view>
							
						</view>
					</block>
					
					<block v-if="empty_show">
						<view style="margin-top: 20vw;" v-if="list.length==0">
							<u-empty mode="data" iconSize="120" ></u-empty>
						</view>
					</block>
					
					
				</view>
				
				<view class="clear_box04"></view>
								
			</view>
		</view>
		
		<view class="footer_box">
			<view class="menu" :data-url="'/pages/personalcenter/appoint/mention'" @click="to_model">
				<view class="title">提前覆约</view>
				<!-- <view class="text">覆约全部/部分</view> -->
			</view>
			<view class="menu" :data-url="'/pages/personalcenter/appoint/retreaty'" @click="to_model">
				<view class="title">立即覆约</view>
				<!-- <view class="text">覆约日 06月22日 </view> -->
			</view>
		</view>
		
		</block>
		<view class="" v-if="loading == 0">
			<block>
				<u-loading-page iconSize="60" loadingText="正在加载中..." image="/static/logo02.png"
					:loading="true"></u-loading-page>
			</block>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id : 0,
				page:1,
				scrrol:false,
				loading : 0,
				info:'',
				select:0,
				order : {},
				car : {},
				stage : {},
				list : [],
				empty_show : '',
				empty_text : '暂无信息',
				load_type : 'more',
				
			}
		},
		onReachBottom() {
			this.loadData();
		},
		onLoad(opt) {
			this.id = opt.id || 0;
			if(this.id > 0){
				this.initData();
				this.loadData();
			}
		},
		methods: {
			to_model(){
				
				let msg = '经理名称:'+this.order.agent_name+',电话:'+this.order.agent_phone;
				uni.showModal({
					title: '联系银行',
					content: msg,
					showCancel : false,
					success: function (res) {
						// if (res.confirm) {
						// 	console.log('用户点击确定');
						// } else if (res.cancel) {
						// 	console.log('用户点击取消');
						// }
					}
				});
				
			},
			initData(){
				let url = this.site_url + 'api/auth/loans/loans_detail_init?id='+this.id;
				this.areq(url).then(res=>{
					if(res.code == 1){
						this.loading = 1;
						this.order = res.data.order;
						this.car = res.data.car;
						this.stage = res.data.end_stage;
					}	
				})
			},
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				this.pageinit();
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			pageinit(){
				this.page = 1;
				this.list = [];
				this.load_type = 'more';
				this.empty_show = 0;
				this.loadData();
			},
			loadData() {
				if(this.load_type == 'loading' || this.load_type == 'no_more'){
					return;
				}
		         let url = this.site_url + 'api/auth/loans/stage_list?id='+this.id;
				 let param = {
					 page : this.page,
					 stype : this.select
				 }
				 this.areq(url,param,'POST').then(res=>{
					 this.empty_show = 1;
					  if(res.code == 1){
					 	 this.page++; 
					 	 this.load_type = 'more';
					 	 this.list = [...this.list,...res.data];
					  }else{
					 	this.load_type = 'no_more';
					 } 
					 
				 })
				 
				 
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;

			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
		
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.order_list{
		width: 90%;
		margin: 4% auto 0;
		background-color: #fff;
		padding: 4%;
		border-radius: 3vw 3vw 0 0;
		box-sizing: border-box;
	}
	
	.order_list .order_text{
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.order_list .order_text .order_menu{
		font-size: 3.5vw;
		color: #fff;
		background-color: #FC5D20;
		height: 9vw;
		border-radius: 9vw;
		width: 20vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	
	.order_list .order_text .order_menu02{
		background-color: #FF4246;
	}
	
	.order_list .order_text .text_box{
		flex: 1;
	}
	
	.order_list .order_text .text_box .title_box{
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.order_list .order_text .text_box .title_box .title{
		font-size: 5vw;
		font-weight: bold;
		color: #333;
		margin-right: 3vw;
	}
	
	.order_list .order_text .text_box .title_box .type{
		height: 5vw;
		padding: 0 1.5vw;
		border-radius: 0.8vw;
		font-size: 3vw;
		letter-spacing: 1px;
		font-weight: bold;
		color: #fff;
		background-color: #5F6488;
		transform: skew(-15deg);
		display: flex;
		align-items: center;
	}
	
	.order_list .order_text .text_box .text{
		width: 100%;
		font-size: 3vw;
		color: #666666;
		margin-top: 2vw;
	}
	
	.order_list .order_text .order_img{
		width: 28vw;
		margin-left: 3vw;
	}
	
	.order_list .order_text .order_img image{
		width: 100%;
	}
	
	.appoint_box{
		width: 100%;
		
	}
	
	.appoint_box .appoint_text{
		width: 100%;
		background-color: #FC5D20;
		border-radius: 3vw 3vw 0 0;
		padding: 6vw 5vw;
		display: flex;
		align-items: center;
	}
	
	.appoint_box .appoint_text .text_box{
		flex: 1;
	}
	
	.appoint_box .appoint_text .menu{
		width: 24vw;
		height: 10vw;
		line-height: 10vw;
		border-radius: 10vw;
		text-align: center;
		line-height: 10vw;
		font-size: 3.5vw;
		background-color: #fff;
		color: #FA6E0C;
	}
	
	.appoint_box .appoint_text .text_box .title{
		font-size: 3.5vw;
		color: #fff;
	}
	
	.appoint_box .appoint_text .text_box .num{
		font-size: 7.5vw;
		color: #fff;
		font-weight: bold;
		margin-top: 2vw;
	}
	
	.appoint_box .appoint_text .text_box .text{
		font-size: 3.5vw;
		color: #fff;
		margin-top: 2vw;
	}
	
	.appoint_box .appoint_menu{
		width: 100%;
		background-color: #FC6E37;
		padding: 4% 0;
		border-radius: 0 0 3vw 3vw;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	.appoint_box .appoint_menu .menu{
		
	}
	
	.appoint_box .appoint_menu .menu .t{
		font-size: 3.3vw;
		color: #fff;
		text-align: center;
	}
	
	.appoint_box .appoint_menu .menu .n{
		font-size: 3.3vw;
		color: #fff;
		margin-top: 1vw;
		text-align: center;
	}
	
	.records_box{
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 0 4vw;
		border-radius: 3vw;
	}
	
	.records_menu{
		width: 100%;
		display: flex;
		align-items: center;
		height: 13vw;
		border-bottom: 1px solid #E0E4EC;
	}
	
	.records_menu .menu{
		width: 18vw;		
		height: 100%;
		line-height: 13vw;
		margin-right: 5vw;
		font-size: 4vw;
		color: #666666;
		text-align: center;
	}
	
	.menucolor{
		color: #333 !important;
		font-weight: bold;
		border-bottom: 3px solid #FC5D20;
	}
	
	.records_list{
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 0vw;
		border-radius: 3vw;
		display: flex;
		align-items: center;
	}
	
	.records_list .text_box{
		
	}
	
	.records_list .text_box:nth-child(1){
		flex: 0.6;
	}
	
	.records_list .text_box:nth-child(2){
		flex: 0.4;
	}
	
	.records_list .text_box .title{		
		display: flex;
		align-items: center;
	}
	
	.records_list .text_box .title .name{
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}
	
	.records_list .text_box .title .tag{
		font-size: 3vw;
		color: #B5B5B5;
		background-color: #F4F5F7;
		height: 5vw;
		padding: 0 1vw;
		border-radius: 1vw;
		display: flex;
		align-items: center;
		margin-left: 2vw;
	}
	
	.records_list .text_box .title .tag02{
		font-size: 3vw;
		color: #FC5D20;
		background-color: #FFF7F4;
		height: 5vw;
		padding: 0 1vw;
		border-radius: 1vw;
		display: flex;
		align-items: center;
		margin-left: 2vw;
	}
	
	.records_list .text_box .title .tag03{
		font-size: 3vw;
		color: #FF0005;
		background-color: #FFF2F2;
		height: 5vw;
		padding: 0 1vw;
		border-radius: 1vw;
		display: flex;
		align-items: center;
		margin-left: 2vw;
	}
	
	.records_list .text_box .time{
		font-size: 3.5vw;
		color: #999999;
		margin-top: 2vw;
	}
	
	.records_list .text_box .money{
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		text-align: right;
	}
	
	.records_list .text_box .text{
		font-size: 3.5vw;
		color: #999999;
		margin-top: 2vw;
		text-align: right;
	}
	
	.footer_box{
		width: 100%;
		background-color: #fff;
		padding: 3vw 4%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
	}
	
	.footer_box .menu{
		flex: 1;
		height: 15vw;
		border-radius: 15vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.footer_box .menu:nth-child(1){
		margin-right: 4%;
		border: 1px solid #FC5D20;
	}
	
	.footer_box .menu:nth-child(2){
		background-color: #FC5D20;
	}
	
	.footer_box .menu .title{
		font-size: 3.6vw;
		color: #FC5D20;
		text-align: center;
		/* margin-top: 2vw; */
		font-weight: bold;
	}
	
	.footer_box .menu .text{
		font-size: 3.3vw;
		color: #FC5D20;
		margin-top: 1vw;
		text-align: center;
	}
	
	.footer_box .menu:nth-child(2) .title{
		color: #fff;
	}
	
	.footer_box .menu:nth-child(2) .text{
		color: #fff;
	}
	
	
</style>
